<script setup>
import { useStore } from 'vuex';
import * as shoppingCartApi from '@/api/shopping-cart.js';

const store = useStore();

store.dispatch('shopping-cart/updateShoppingCartList');

const shoppingCartList = computed(() => store.state['shopping-cart'].shoppingCartList);
const isAllSelected = computed(() => {
  if (shoppingCartList.value.length === 0) {
    return false;
  }
  return shoppingCartList.value.every((item) => item.selected);
});

const table = ref(null);

// 选择复选框时
async function onSelectionChange({ selected, skuId }) {
  // 1. 通知api改动当前sku的状态
  await shoppingCartApi.updateShoppingCartMember(skuId, !selected);
  // 2. 刷新列表
  store.dispatch('shopping-cart/updateShoppingCartList');
}

</script>

<template>
  <el-table
    ref="table"
    :data="shoppingCartList"
  >
    <el-table-column width="80" prop="selected">
      <template #default="{ row }">
        <el-checkbox
          :model-value="row.selected"
          @mouseup.native.stop="onSelectionChange(row)"
        />
      </template>
      <template #header>
        <el-checkbox :model-value="isAllSelected">全选</el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="商品名" prop="name">

    </el-table-column>
  </el-table>
</template>
